<template>
  <div class="container">
    <v-header :goBack="true" :backHome="false" ref="headerRef"></v-header>
    <div class="debit-credit-detail" ref="scrollContent">
      <iframe :src="$route.query.url" scrolling="yes" class="iframe"></iframe>
    </div>
    <div class="d-app d-flex flex-column align-items-center" ref="downloadRef">
      <router-link to="/download-app" :class="'d-app-link'">下载app申请更多产品</router-link>
      <img class="logo" src="/static/images/d-app.png" />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import header from '@/components/header/head'
  import {visitorReport} from '@/service/index'
  import {Config} from '@/config/mUtils'
  import {mapState} from 'vuex'

  export default {
    props: {
      productId: {
        type: String
      },
      pageId: {
        type: String
      }
    },
    data() {
      return {
        screenHeight: 0,
        sreenWidth: 0,
        showDownload: false
      }
    },
    created() {
      visitorReport(this.pageId, Config.visitorReport.product, this.productId)
      .then((resp) => {
        console.log(resp)
      })
      .catch((error) => {
        console.log(error)
      })
    },
    mounted() {
      let hh = parseFloat(window.getComputedStyle(this.$refs.headerRef.$el).height.replace('px', ''))

      this.$refs.scrollContent.style.height = (window.screen.height - hh) + 'px'
    },
    components: {
      'v-header': header
    },
    computed: {
      top() {
        let offset = -(this.activeIndex * 30)
        return `margin-top: ${offset}px`
      },
      ...mapState(['authorized'])
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/variable.styl"

  .debit-credit-detail
    position: relative
    width: 100%
    margin-top: 2rem
    .iframe
      width: 100%
      height: 100%
  .d-app
    padding: 14px 12px 12px 12px
    background: $color-white
    margin-bottom: 40px
    img
      height: 58px
    .d-app-link
      height: 22px
      line-height: 22px
      padding: 0 12px
      border: 1px solid $color-dark-grey
      border-radius: 10px
      text-decoration: none
      color: $color-dark-grey
      font-size: 13px
      text-align: center
</style>
